---
type: tutorial
title: ヘッダーを作ってみよう
description: >-
  「初めてのAstroブログ」チュートリアル -
  これまで学んだことをすべて使って、レスポンシブなナビゲーションを備えたヘッダーを作成します
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

あなたのサイトはさまざまなデバイスで表示されます。複数の画面サイズに対応可能なページナビゲーションを作成しましょう！

<PreCheck>
  - ナビゲーションコンポーネントを含んだサイトのヘッダーを作成する
  - ナビゲーションコンポーネントをレスポンシブにする
</PreCheck>


<Box icon="puzzle-piece">

## やってみよう - 新しいヘッダーコンポーネントを作成する

<Steps>
1. 新しいヘッダー（Header）コンポーネントを作成してみましょう。既存の`Navigation.astro`コンポーネントをインポートし、`<header>`要素の中にある`<nav>`要素の中で使用します。

    <details>
    <summary>コードを表示</summary>

    `src/components/`に`Header.astro`という名前のファイルを作成します。
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>




<Box icon="puzzle-piece">

## やってみよう - ページを更新する

<Steps>
1. 各ページで、既存の`<Navigation/>`コンポーネントを新しいヘッダーに置き換えます。

    <details>
    <summary>コードを表示</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "ホームページ";
    ---
    <html lang="ja">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. ブラウザのプレビューを開き、ヘッダーがすべてのページに表示されていることを確認します。まだ見た目は変わりませんが、開発者ツールを使用してプレビューを検査すると、ナビゲーションリンクの周りに`<header>`や`<nav>`などの要素があることがわかります。
</Steps>

</Box>

## レスポンシブスタイルを追加する

<Steps>
1. `Navigation.astro`を更新して、ナビゲーションリンクを制御するためのCSSクラスを追加します。既存のナビゲーションリンクを`nav-links`というクラスをもつ`<div>`で囲みます。

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. `global.css`に以下のCSSスタイルをコピーします。これらのスタイルは以下のことをおこないます。

    - モバイル向けにナビゲーションリンクをスタイリングして配置する
    - モバイルでリンクを表示または非表示にするために切り替えられる`expanded`クラスを含める
    - 大きな画面サイズに対して異なるスタイルを定義するために`@media`クエリを使用する

    :::tip[モバイルファーストなデザイン]
    最初は小さい画面サイズのデザインから始めましょう！小さい画面サイズはシンプルなレイアウトが必要です。その後、スタイルを調整して大きなデバイスに対応します。複雑な場合のデザインから始めてしまうと、それをまたシンプルにするための努力が必要になります。
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* ナビゲーションのスタイル */

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```
</Steps>

ウィンドウのサイズを変更して、異なる画面幅で異なるスタイルが適用されていることを確認してください。`@media`クエリの使用により、ヘッダーは画面サイズに対して**レスポンシブ**になりました。



<Box icon="check-list">

## チェックリスト

<Checklist>
- [ ] CSSを使用してサイトにレスポンシブな要素を追加できる。
</Checklist>
</Box>

### 参考

- [Component-based Design](https://www.droptica.com/blog/component-based-design/) <Badge class="neutral-badge" text="外部サイト" />

- [Semantic HTML Tags](https://www.dofactory.com/html/semantics) <Badge class="neutral-badge" text="外部サイト" />

- [Mobile-first Design](https://www.mobileapps.com/blog/mobile-first-design) <Badge class="neutral-badge" text="外部サイト" />
